<template>
  <div class="container">
    <goodscomments v-if="is_comment"></goodscomments>
    <template v-else>
      <div class="swiper border-b">
        <mt-swipe :auto="4000" class="banners">
          <mt-swipe-item v-for="banner in banners" :key="banner.img_src">
            <xd-img :src="banner | absUrl" class="banner-item" />
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="collection-goods">
        <img src="../../assets/icons/goods/notcollect@2x.png" v-if="!isCollected"  @click="doCollectGoods" alt="" class="goods-icon">
        <img src="../../assets/icons/goods/collect@2x.png" v-else alt="" @click="cancelCollectGoods" class="goods-icon">
      </div>
      <div class="p30 border-b">
        <div class="goods-title">
          {{info.title}}
        </div>
        <div class="goods-desc">
          <span class="goods-points">
            {{info.points}}积分
          </span>
          <span class="goods-money">
            +{{info.price}}元
          </span>
        </div>
      </div>
      <div class="p30 fz22 txt999 border-b">
        <div class="flex">
          <div>
            运费：{{info.expressFee>0?info.expressFee:'免运费'}}
          </div>
          <div class="flex-con text-center">
            剩余：{{info.leftCount}}
          </div>
          <div>
            销量：{{info.saleCount}}
          </div>
        </div>
      </div>
      <div class="hr10gray"></div>
      <div class="p30 fz26 txt333" @click="showRuleDialog">
        选择：{{curRules||'规格'}}
      </div>
      <div class="hr10gray"></div>
      <!-- <div class="p30" v-if="info.provider">
        <div class="flex">
          <img :src="info.provider.avatar|absUrl" v-if="info.provider.avatar"  alt="" class="com-avatar">
          <div class="flex-con">
            <div class="fz30 txt222 com-name">{{info.provider.title}}</div>
            <div class="flex txt999 fz22">
              <template v-if="info.provider.authed">
                <img src="../../assets/icons/goods/company-auth@2x.png" alt="" class="company-auth-icon">
                <div class="com-namet-txt" v-if="info.provider.authed">企业认证</div>
              </template>
              <template v-if="info.provider.canRefundIn7days">
                <img src="../../assets/icons/goods/safeback@2x.png" alt="" class="safeback-icon">
                <div>7天无理由退换货</div>
              </template>

            </div>
          </div>
        </div>
      </div> -->
      <div class="tab-nav flex">
        <div class="tab-nav-selected">
          商品详情
        </div>
        <div @click="gotoComments">
          用户评价
        </div>
      </div>
      <div class="goods-content" v-html="info.content">

      </div>

    </template>
    <div class="footer-nav-before"></div>
    <div class="footer-nav flex">
      <div class="flex-con flex">
        <a class="flex-con text-center block" href="tel:400-628-8333">
          <div class="ib">
            <img src="../../assets/icons/goods/earsblue@2x.png" alt="" class="ears-icon">
            <div class="text-center">客服</div>
          </div>
        </a>
        <div class="flex-con text-center">
          <router-link class="ib" tag="div" :to="{path:'/cart'}">
            <img src="../../assets/icons/goods/cart-icon@2x.png" alt="" class="cart-icon">
            <div class="text-center">购物车</div>
          </router-link>
        </div>
      </div>
      <template v-if="!isForGroup">
        <div class="footer-nav-btn add2cart-btn" @click="showRuleDialog">
          加入购物车
        </div>
        <div class="footer-nav-btn footer-nav-buy-btn" @click="showRuleDialogNow">
          立即购买
        </div>
      </template>
      <template v-else>
        <div class="gray-seprator"></div>
        <div class="buyrowbtn flex flex-vertical">
          <div class="origin-price">¥800</div>
          <div class="btn-txt">立即购买</div>
        </div>
        <div class="groupbtn flex flex-vertical">
          <div class="origin-price">¥800</div>
          <div class="btn-txt">立即团购</div>
        </div>
      </template>
    </div>
    <div class="rule-masker" v-show="isRuleDialogShowed" @click="closeRuleDialog">

      <div class="rule-dialog" @click.stop="noop">
        <div class="dialog-inner">
          <div class="border-b rule-title">
            <div class="flex">
              <img :src="info.cover|absUrl" alt="" class="rule-goods-img">
              <div class="flex-con">
                <div class="rule-goods-title">
                  {{info.title}}
                </div>
                <div class="rule-goods-points">
                  <span class="goods-points">{{buyInfo.points || info.points}}积分</span>
                  <span class="goods-money">+{{buyInfo.price || info.price}}元</span>
                </div>
              </div>
              <div>
                <img @click="closeRuleDialog" src="../../assets/icons/goods/closebtn2@2x.png" alt="" class="closebtn-icon">
              </div>
            </div>
          </div>

          <div class="rule-desc border-b" v-for="group in info.ruleGroups" :key="group.title">
            {{group.title}}：
            <div class="tags clearfix">
              <div class="tag" @click="toggleRuleItem(detail,group)" :class="{'tag-selected':detail.selected}" v-for="detail in group.details"
                :key="detail.id">{{detail.title}}</div>
            </div>
          </div>
          <div class="rule-num">
            <div class="flex">
              <div class="flex-con">
                购买数量：
                <div class="rule-num-left rule-num-content">
                  剩余 {{buyInfo.leftCount}}
                </div>
              </div>
              <div class="text-right">
                <div class="reducenum-btn" @click="reduceGoodsNum" :class="{'btn-disabled':buyInfo.leftCount<=0||saveData.num<=1}">-</div>
                <input type="tel" class="goods-num" v-model="saveData.num">
                <div class="addnum-btn" @click.stop="addGoodsNum" :class="{'btn-disabled':buyInfo.leftCount<=0||saveData.num>=buyInfo.leftCount}">+</div>
              </div>
            </div>

          </div>
        </div>
        <div class="btn-areas flex" :class="{'btn-areas-disabled':buyInfo.leftCount<=0}" v-if="isAdd2Cart">
          <div class="add2cartbtn flex-con" @click.stop="add2cart">
            加入购物车
          </div>
          <div class="buynowbtn flex-con" @click.stop="buynow">
            立即购买
          </div>
        </div>
        <div class="btn-areas flex" v-else :class="{'btn-areas-disabled':buyInfo.leftCount<=0}">
          <div class="buynowbtn flex-con" @click.stop="buynow">
            下一步
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import goodscomments from "../../components/goodscomments";
  import {parseContentImgUrl} from '../../filters/index';
  export default {
    components: {
      goodscomments
    },
    data() {
      return {
        isCollected:false,
        is_comment: false,
        isAdd2Cart: true,
        info: {},
        curRules: "",
        buyInfo: {
          points: 0,
          price: 0,
          leftCount: 0
        },
        saveData: {
          num: 1,
          goodsRuleToken: '',
          goodsId: 0,
          selectedRules: ""
        },
        isRuleDialogShowed: false,
        isForGroup: 0,
        banners: [],
        item: {
          num: 1
        }
      };
    },
    methods: {
      doCollectGoods(){
        this.isCollected = true;
        this.$post('/api/doCollectGoods',{
          goodsId:this.$route.query.id
        }).then(_=>{
          
        });
      },
      cancelCollectGoods(){
        this.isCollected = false;
        this.$post('/api/cancelCollectGoods',{
          goodsId:this.$route.query.id
        });
      },
      add2cart() {
        if (this.buyInfo.leftCount <= 0) {
          return;
        }
        if (this.info.ruleGroups && this.info.ruleGroups.length > 0) {
          if (!this.saveData.goodsRuleToken.trim()) {
            this.$toast("请先选择规格");
            return;
          }
        }
        if (parseInt(this.saveData.num) <= 0) {
          this.$toast("商品数量必须大于0");
          return;
        }
        this.saveData.goodsId = this.$route.query.id;
        this.showLoading();

        this.$post("/api/user/add2cart", this.saveData)
          .then(info => {
            this.$toast("加入购物车成功");
            this.isRuleDialogShowed = false;
            // if (this.currentGoodsPriceItem) {
            // 有规格
            // this.currentGoodsPriceItem.leftCount -= this.saveData.num;
            // }
            // this.buyInfo.leftCount -= this.saveData.num;
            // this.info.leftCount -= this.saveData.num;
            this.hideLoading();
          })
          .catch(() => {
            this.hideLoading();
          });
      },
      buynow() {
        if (this.buyInfo.leftCount <= 0) {
          return;
        }
        if (this.info.ruleGroups && this.info.ruleGroups.length > 0) {
          if (!this.saveData.goodsRuleToken.trim()) {
            this.$toast("请先选择规格");
            return;
          }
        }
        if (parseInt(this.saveData.num) <= 0) {
          this.$toast("商品数量必须大于0");
          return;
        }
        this.$router.push(
          "/surebill/" +
          this.$route.query.id +
          "?goodsRuleToken=" +
          this.saveData.goodsRuleToken +
          "&goodsNum=" +
          this.saveData.num
        );
      },
      addGoodsNum() {
        if (
          this.buyInfo.leftCount > 0 &&
          this.buyInfo.leftCount > this.saveData.num
        ) {
          this.saveData.num++;
        }
      },
      setGoodsNum() {
        if (this.saveData.num > this.buyInfo.leftCount) {
          this.saveData.num = this.buyInfo.leftCount;
        }
        if (this.saveData.num < 1) {
          this.saveData.num = 1;
        }
      },
      reduceGoodsNum() {
        if (this.buyInfo.leftCount > 0 && this.saveData.num > 1) {
          this.saveData.num--;
        }
      },
      gotoComments() {
        this.$router.replace("/goodscomment?id=" + this.$route.query.id);
      },
      closeRuleDialog() {
        this.isRuleDialogShowed = false;
      },
      toggleRuleItem(item, group) {
        group &&
          group.details &&
          group.details.forEach(el => {
            this.$set(el, "selected", item.id == el.id ? true : false);
          });
        let selectedIds = [];
        let selectedTitles = [];
        if (
          this.info.ruleGroups.every(el => {
            if (el.details) {
              let hasSelectOne = false;
              el.details.every((i, index) => {
                if (i.selected) {
                  selectedIds.push(index);
                  hasSelectOne = true;
                  selectedTitles.push(i.title);
                  return false;
                }
                return true;
              });
              return hasSelectOne;
            }
            return false;
          })
        ) {
          this.curRules = selectedTitles.join(" ");
          let goodsPriceItem = this.info.goodsPrices.filter(
            i => this.trim(i.priceToken, ',') == selectedIds.join(",")
          )[0];
          if (goodsPriceItem) {
            this.saveData.goodsRuleToken = goodsPriceItem.priceToken;
            this.saveData.selectedRules = this.curRules;
            this.buyInfo.points = goodsPriceItem.points;
            this.buyInfo.price = goodsPriceItem.price;
            this.buyInfo.leftCount = goodsPriceItem.leftCount;
            this.currentGoodsPriceItem = goodsPriceItem;
          }
        }
      },
      noop() {},
      showRuleDialog() {
        this.isRuleDialogShowed = true;
        this.isAdd2Cart = true;
      },
      showRuleDialogNow() {
        this.isRuleDialogShowed = true;
        this.isAdd2Cart = false;
      }
    },
    watch: {
      $route(to, from) {
        this.is_comment = this.$route.meta.is_comment;
      }
    },
    created() {
      this.isForGroup = this.$route.query.isgroup || 0;
      this.is_comment = this.$route.meta.is_comment;
      this.showLoading();
      this.$get("/api/goods_detail?id=" + this.$route.query.id).then(info => {
        this.hideLoading();
        this.info = info;
        if (!info.ruleGroups || info.ruleGroups.length == 0) {
          this.buyInfo.leftCount = info.leftCount;
        }
        if(this.info.content){
          this.info.content = parseContentImgUrl(this.info.content);
        }
        this.isCollected = info.collected;
        this.banners = info.imgSrcs;
      });
    }
  };

</script>

<style lang="scss" scoped>
  .swiper {
    height: 6.56rem;
    .banners {
      height: 6.56rem;
      text-align: center;
      img {
        height: 6.56rem;
      }
      .banner-item {
        height: 6.56rem;
        background-size: cover;
      }
    }
  }

  .goods-title {
    font-size: 0.4rem;
    line-height: 1.4em;
    color: #17402a;
    padding-bottom: 0.2533rem;
  }

  .goods-desc {
    font-size: 0.3733rem;
    .goods-points {
      color: #ff2a2a;
    }
    .goods-money {
      color: #005a1a;
    }
  }

  .com-avatar {
    width: 1.1067rem;
    height: 1.1067rem;
    border-radius: 50%;
    margin-right: 0.2533rem;
  }

  .com-name {
    padding-bottom: 0.1867rem;
  }

  .company-auth-icon {
    width: 0.28rem;
    height: 0.3867rem;
    margin-right: 0.16rem;
  }

  .safeback-icon {
    margin-right: 0.16rem;
    width: 0.32rem;
    margin-left: 0.5467rem;
    height: 0.3733rem;
  }

  .goods-content {
    line-height: 2em;
    font-size: 0.3467rem;
    padding: 0.4rem;
  }

  .collection-goods{
    position: absolute;
    right:0.4rem;
    top:0.4rem;
    img{
      width:0.8rem;
      height:0.8rem;
    }
  }

  .goods-content img {
    width: 100%;
  }

  .tab-nav {
    text-align: center;
    color: #17402a;
    margin-top: 0.6rem;
    margin-bottom: 0.2rem;

    justify-content: space-around;
    font-size: 0.4rem;
    &>div {
      padding: 0.2267rem 0;
    }
    .tab-nav-selected {
      color: #ff2a2a;
      position: relative;
      &:after {
        position: absolute;
        display: block;
        content: " ";
        left: 0;
        right: 0;
        bottom: 0;
        height: 0.0533rem;
        background-color: #ff2a2a;
      }
    }
  }

  .footer-nav-before {
    height: 1.24rem;
  }

  .ears-icon {
    width: 0.52rem;
    height: 0.5067rem;
    margin-bottom: 0.0933rem;
  }

  .footer-nav {
    height: 1.24rem;
    position: fixed;
    font-size: 0.24rem;
    text-align: center;
    color: #666;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #efefef;
  }

  .cart-icon {
    width: 0.4933rem;
    height: 0.48rem;
    margin-bottom: 0.12rem;
  }

  .footer-nav-btn {
    width: 3.4267rem;
    background-color: #ff6a0f;
    text-align: center;
    color: white;
    height: 1.24rem;
    line-height: 1.24rem;
    font-size: 0.4rem;
  }

  .footer-nav-buy-btn {
    color: white;
    width: 3.0667rem;
    text-align: center;
    background-color: #e82f24;
  }

  .rule-masker {
    background-color: rgba(0, 0, 0, 0.36);
    z-index: 100;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }

  .rule-dialog {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 0.3467rem;
    background-color: #fff;
    .closebtn-icon {
      width: 0.5333rem;
      height: 0.5333rem;
      position: relative;
      top: -0.4rem;
    }
    .dialog-inner {
      padding: 0.32rem 0.4rem;
    }
    .rule-goods-img {
      width: 1.3333rem;
      height: 1.3333rem;
      margin-right: 0.4933rem;
    }
    .rule-goods-title {
      font-size: 0.3733rem;
      color: #17402a;
      line-height: 1.4em;
      padding-bottom: 0.28rem;
    }
    .rule-goods-points {
      font-size: 0.3733rem;
    }
    .goods-points {
      color: #ff2a2a;
    }
    .goods-money {
      color: #005a1a;
    }
    .rule-title {
      padding-bottom: 0.32rem;
    }
    .rule-desc {
      font-size: 0.3733rem;
      color: #333;
      padding: 0.32rem 0;
    }
    .rule-num {
      padding: 0.4533rem 0 0.5733rem 0;
      font-size: 0.3733rem;
      color: #333;
    }
    .rule-num-left {
      font-size: 0.32rem;
      color: #999999;
    }
    .tags {
      margin-top: 0.32rem;
      margin-right: -0.36rem;

      .tag {
        margin-right: 0.36rem;
        float: left;
        padding: 0 0.3467rem;
        height: 0.8533rem;
        line-height: 0.8533rem;
        border-radius: 0.12rem;
        border: solid 1px rgba(163, 163, 163, 0.58);
      }
      .tag-selected {
        color: #f08c37;
        border: solid 1px #f08c37;
      }
    }
  }

  .btn-areas {
    font-size: 0.4267rem;
    color: #fff;
    text-align: center;
    height: 1.1467rem;
    &>div {
      height: 1.1467rem;
      line-height: 1.1467rem;
    }
    .add2cartbtn {
      background-color: #ff690e;
    }
    .buynowbtn {
      background-color: #ff2a2a;
    }
  }

  .btn-areas-disabled {
    .add2cartbtn {
      opacity: 0.4;
    }
    .buynowbtn {
      opacity: 0.4;
    }
  }

  .reducenum-btn,
  .goods-num,
  .addnum-btn {
    float: left;
  }

  .goods-num {
    width: 0.76rem;
    text-align: center;
    font-size: 0.3733rem;
    padding: 0;
    border: none;
    margin: 0;
    display: inline-block;
    height: auto;
  }

  .reducenum-btn,
  .addnum-btn {
    text-align: center;
    width: 0.4667rem;
    color: white;
    font-size: 0.49rem;
    height: 0.4667rem;
    border-radius: 0.08rem;
    background-color: #34a359;
  }

  .btn-disabled {
    background-color: rgba(52, 163, 89, 0.5);
  }

  .rule-num-content {
    padding-top: 0.32rem;
  }

  .gray-seprator {
    width: 0.0533rem;
    height: 0.7467rem;
    background-color: rgba(51, 51, 51, 0.41);
  }

  .buyrowbtn {
    width: 2.96rem;
    height: 1.24rem;
    justify-content: space-around;
    text-align: center;
    padding: 0.1rem 0;
    box-sizing: border-box;
  }

  .origin-price {
    font-size: 0.32rem;
    color: #ff8a00;
  }

  .btn-txt {
    font-size: 0.32rem;
    color: #ff8a00;
  }

  .groupbtn {
    padding: 0.1rem 0;
    box-sizing: border-box;
    text-align: center;
    background-color: #e82f24;
    justify-content: space-around;
    width: 3.0267rem;
    height: 1.24rem;
    .origin-price,
    .btn-txt {
      color: #ffffff;
    }
  }

</style>
